import React, {Component} from 'react';
import {Text, TouchableOpacity, View,} from 'react-native';

import {MapModule, MapView} from 'rn-ai-baidu-map'
import Map_c from './map_c';
import Icon from 'react-native-vector-icons/Ionicons';
import {public_Style as styles} from '../../../../styles';

let Dimensions = require('Dimensions');
let height = Dimensions.get('window').height;

export default class Map_all_c extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
        }
    };

    onLoad(){
        if(this.props.navigation.state.params.companyY&&this.props.navigation.state.params.companyX){
                MapModule.setMark(this.props.navigation.state.params.companyY, this.props.navigation.state.params.companyX).then(ret => {
                    this.setState({list: ret.poiInfos});
                })
        }
    }

    render() {
        return (
            <View style={{backgroundColor: "#ffffff", flex: 1}}>

                <MapView
                    zoom={14}
                    onMapClick={e => MapModule.setMark(e.latitude, e.longitude).then(ret => {
                        this.props.navigation.state.params.rollback(ret);
                        this.setState({list: ret.poiInfos});
                    })}
                    style={[styles.map_self, {height: height * 0.6}]}

                    onMapLoad={() =>
                        this.onLoad()
                        }
                />

                <TouchableOpacity activeOpacity={1} style={[styles.map_butt, {marginTop: height * 0.51}]}
                                  onPress={() =>
                                      MapModule.toPositionAuto().then(
                                          res => MapModule.setMark(res.latitude, res.longitude).then(ret => {
                                              this.props.navigation.state.params.rollback(ret);
                                              this.setState({list: ret.poiInfos});
                                          })
                                      )
                                  }>
                    <Icon
                        name={'md-locate'}
                        size={25}
                        color={'#fc6866'}/>
                </TouchableOpacity>


                <View style={styles.map_all}>
                    <TouchableOpacity activeOpacity={1} style={styles.map_click}
                                      onPress={() =>
                                          MapModule.toPositionAuto().then(
                                              res => MapModule.setMark(res.latitude, res.longitude).then(ret => {
                                                  this.props.navigation.state.params.rollback(ret);
                                                  this.setState({list: ret.poiInfos});
                                              })
                                          )
                                      }>
                        <Icon
                            name={'md-pin'}
                            size={25}
                            color={'#3d9ccc'}/>
                        <Text style={styles.map_addnow}>点击定位当前地址</Text>
                    </TouchableOpacity>
                </View>
                <Map_c
                    data={this.state.list}
                    navigation={this.props.navigation}
                />
            </View>
        )
    }
}
